<!DOCTYPE html>

<html>
<head>
<title>Min max testing la la la </title>
<style>
#abba {
border: medium solid black;
margin: 10px;
padding: 10px;
background: yellow;
width: 15em;
}
#content {
float: left;
background: green;
}
</style>
<script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    <script src="DOMUtils.js"></script>
    <script src="CSSBox.js"></script>
    <script>
    window.onload = function () {
    var abba = document.getElementById('abba');
    var box = new CSSBox(abba);
    console.log(box.getBoxDimension('margin', 'horizontal'), ' x ', box.getBoxDimension('margin', 'vertical'));
    console.log(box.getBoxDimension('border', 'horizontal'), ' x ', box.getBoxDimension('border', 'vertical'));
    console.log(box.getBoxDimension('padding', 'horizontal'), ' x ', box.getBoxDimension('padding', 'vertical'));
    console.log(box.getBoxDimension('content', 'horizontal'), ' x ', box.getBoxDimension('content', 'vertical'));
    console.log(box.getCSSLength('width'), ' x ', box.getCSSLength('height'));
    console.log(box._getRoughOffset());
    }
</script>
</head>
<body>
<div id="content">
<div id="abba">
asdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljdasdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljdasdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljdasdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljdasdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljdasdfashfasdfasfdl;kja
sdfj
asfjdlas
fd;fasfdasdfasfja
sdflsa;jf
djsjdjlsfjasjdf;;ljd
</div>
</div>
</body>
</html>